Opción de mostrar y cerrar imagen : Gem@ BLOG

En ¿Cómo se hace? el blog que actualiza y mantiene Vku he visto una imagen con la particularidad que contiene un botón de cerrar, cuando hacemos click sobre el botón la imagen desaparece, en un principio quizás no se vea nada del otro mundo pero tiene su utilidad cuando se trata de mostrar contenido de interés y que este tenga un lugar preferente sin llegar a molestar la lectura. Es necesario utilizar un script y lógicamente el contenido que deseamos mostrar.

La forma de añadirlo es la siguiente, justo antes de </head> añadimos el script:

<script>

function cerrarimagen(){

div = document.getElementById("cerrar");

div.style.display="none";

}

</script>

Y el bloque de añadir las imágenes después de <body>

Para el ejemplo no he sido muy imaginativa dada la euforia que se vive ahora mismo en la calle con el mundial y a media hora de comenzar el partido que pasará a la historia así que añadí la misma idea que nuestro amigo de ¿Cómo se hace?

* Con width movemos la imagen a mostrar hacia la izquierda o derecha.

* La imagen de cerrar la añadimos ayudándonos de left y top porque según el tamaño de la imagen nos quedará en una esquina u otra.

* Con float: right indicamos si la imagen la añadimos a la derecha y con float: left en caso de ser a la izquierda.

Anónimo: Gem@, no si conoces el "nuevo lío social" o algo así llamado Empire Avenue (aún en fase Beta) tengo tres invitaciones disponibles... dime si te apetece probarlo y te envío una, si es que aún no lo han hecho ya...; 11.7.10
Gem@: :: Es la primera vez que oigo, o mejor dicho leo algo sobre Empire Avenue Rosa, claro que puedes mandarme la invitación auqnue no soy demasiado amiga de las redes sociales nunca está demás conocerlas :) Gracias!!; 12.7.10
Unknown: Felicitaciones :P te he visto por la tele saltando y gritando de alegría!

No puedo cerrar la imagen que has puesto :O

Buena semana!; 12.7.10
Gem@: :: Qué bueno Graciela si llego a saber que me estás viendo te habría mandado un abrazo :D
- No puedes cerrarla porque es una captura del ejemplo Graciela :S; 12.7.10
Mr. Chapter: Gema, si dejas el raton en tu boton de inicio te sale una especie de cajita en la que pone "Gem@ blog"
¿Tienes alguna entrada en la que se explique como se pone eso?; 12.7.10
Henry Herrera: Gracias por mostrar como se hace, siempre tuve deseos de poner algo así, pero no me sabia como!

Felicidades por el triunfo de la seleccion, como dirían unos españoles al ser entrevistados, tomaron jugo de naranja.; 12.7.10
Gem@: :: Hola Henry mucho tiempo sin verte, espero todo marche bien :) y me alegra que te sea útil esta entrada ;); 12.7.10
Gem@: :: guither hay poco que explicar se trata de el atributo title que sirve para mostrar una especie de tooltip cuando como dices se añade el ratón sobre elsitio donde está añadida la etiqueta. En negrita he marcado donde añadimos el atributo.

En un enlace:
<a href='http://gemablog-.blogspot.com/' title='Gem@ BLOG'>Inicio</a>

Una imagen:
<img title="Gem@ BLOG"src="URL-DE-LA-IMAGEN">; 12.7.10
Mr. Chapter: Muchisimas gracias :)
y siento las molestias; 12.7.10
Mauri: Gracias Gem@. Eliminé la columna de gadgets, amplié la de texto para reponer el espacio restante, y angosté un poco el margen para que el texto quedara simetrico con el encabezado. (Creo que ahora luce mejor:); 12.7.10
Cárpena Creativos: Hola Gema, FELICITACIONES, un excelente partido, un excelente equipo, un excelente campeon del mundo y tu una excelente persona ... lei a Graciela q saliste por la tele si no me equivoco, suban el video a Youtube pa' verlo como decimos aca, :D
Un abrazo; 13.7.10
Martin: Saludos,
Gema, amiga, tengo un problemita y vengo haber si puedes ayudarme.

He Personalizado una Plantilla y me ha gustado como me va quedando, solo que quiero colocarle un sistema de votacion de estrella (YA LO CONSEGUI Y FUNCIONA PERFECTAMENTE). http://directorio-internacional.blogspot.com/

Lo que quiero es que se vea asi como en este Blog. http://www.colorizetemplates.com/; 13.7.10
Gem@: :: No es ninguna molestia guither :)

:: Buen trabajo juan_santiago !!

:: Gracias Jaime, lo que dijo Graciela fue hablando metafóricamente y en broma, yo las sigo :D y como dice que de ilusión también se vive pues a nosotras nos hace ilusión contar lo que nos gustaría como si fuera algo real. No hay tales imágenes porque todo lo que he visto ha sido desde casa más quisiera yo haberlo visto :(

:: Blogs Cristianos lo que ves en ese blog es la evaluación de estrellas que puedes añadir en este orden:
Plantilla de diseño/ Entradas del blog (editar)/Evaluación de estrellas ¡Suerte!!; 14.7.10
Unknown: Era un ejemplo y yo pinchando y pinchando jajaja
Sí lo pude apreciar en el blog que indicas :); 14.7.10
Gem@: :: jajajaja Graciela, la culpa es mía por no avisar :$; 14.7.10
Martin: Hola de nuevo,
No me sale la opción de esas estrellas, como hago para colocarlas?; 14.7.10
Cárpena Creativos: ok Gema, bueno me quedare con las ganas :'(; 14.7.10
Gem@: :: Blogs Cristianos mira el siguiente enlace de Rosa, está muy bien explicado :)
http://elescaparatederosa.blogspot.com/2008/07/ranking-de-estrellas-en-blogger-ya.html

:: No te pierdes nada por no verme saltar Jaime jajajaja; 14.7.10